<!--
 * @Author: zhang ke
 * @Date: 2025-06-24 15:57:59
 * @LastEditors: your name
 * @LastEditTime: 2025-07-05 16:57:14
 * @Description: 
 * @FilePath: \vue3-admin\src\views\screen\index.vue
-->
<template>
  <div class="screen-wrapper">
    <div class="screen-box" ref="screen">
      <!-- 头部 -->
         <Top></Top>
         <div class="content-wrapper">
           <div class="left">
              <Tourist></Tourist>
              <Gender></Gender>
              <Age></Age>
           </div>
           <div class="content">
            <Map></Map>
            <Line></Line>
           </div>
           <div class="right">
              <Rank></Rank>
              <Year></Year>
              <Subscribe></Subscribe>
           </div>
         </div>
    </div>
   
  </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import Top from './components/Top.vue'
import Tourist from './components/Tourist.vue'
import Gender from './components/Gender.vue'
import Age from './components/Age.vue'
import Map from './components/Map.vue'
import Line from './components/Line.vue'
import Rank from './components/Rank.vue'
import Year from './components/Year.vue'
import Subscribe from './components/Subscribe.vue'
//获取数据大屏展示内容盒子的DOM元素
let screen = ref()
onMounted(()=>{
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})

//定义大屏缩放比例
const getScale = (w = 1920, h = 1080)=>{
  const ww = window.innerWidth / w
  const  wh = window.innerHeight / h
  return  ww < wh ? ww : wh
}
//监听视口变化
window.onresize = ()=>{
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style scoped lang="scss">
.screen-wrapper{
  width: 100vw;
  height: 100vh;
  background: url('./images/bg.png') no-repeat;
  background-size: cover;
  .screen-box{
    position: fixed;
    //设计稿的尺寸
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform-origin: left top;
    .content-wrapper{
      width: 100%;
      display: flex;
      .left{
        flex: 1;
      }
      .content{
        flex: 2;
      }
      .right{
        flex: 1;
      }
    }
  }
}
</style>
